<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">个人主页</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width:25px;" />
        
      </div>
    </div>
    <div class="main">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        姓名：{{userAddapt.userName}}
        <br />
        ID:{{userAddapt.userID}}
        <br>
        
        <template #footer>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="修改信息" name="1">
              <el-input disabled v-model="userAddapt.userID" />
              <el-input v-model="userAddapt.userName" clearable />
              <el-input v-model="userAddapt.password" clearable show-password />
              <el-popconfirm title="你确认要修改吗?" 
              @confirm="update">
                <template #reference>
                  <el-button type="primary" >修改</el-button>
                </template>
              </el-popconfirm>
            </el-collapse-item>
          </el-collapse>
        </template>
      
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { User } from "@element-plus/icons-vue";
import { h } from "vue";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
const user = sessionStorage.getItem("user");
const activeNames = ref(["0"]);
let userobj = JSON.parse(user);
let userdata = userobj._value;
let userAddapt = ref({
  userName: "",
  userID: "",
  role: "",
  password: ""
});
const back = () => {
  router.go(-1);
};
const init = () => {
  axios
    .post("/Worker/getUserByID", {
      userID: userdata.userID,
      role: userdata.role
    })
    .then(response => {
      userAddapt.value = response.data;
    })
    .catch(error => {
      console.log(error);
    });
};
init();
const result = ref("");
const update = () => {
  axios
    .post("/Worker/updateWorker", {
      userID: userAddapt.value.userID,
      userName: userAddapt.value.userName,
      password: userAddapt.value.password,
      role: userAddapt.value.role
    })
    .then(response => {
      result.value = response.data;
      if (result.value == "") {
        ElMessage({
          message: "修改成功",
          type: "success"
        });
      }
    })
    .catch(error => {
      console.log(error);
    });
};
</script>
<style scoped>
.head {
  display: flex;
  justify-content: space-between;
}
.main {
  margin: 60px;
}
</style>